<template>
	<view class="containers">
		<uni-grid class="grid" :column="2" :showBorder="false" :square="false">
			<uni-grid-item 
			class="grid-list"
			v-for="({name, img1v1Url, alias, id}, i) in data"
			:key="i"
			>
				<image :src="img1v1Url" @click="singerDetail(name, id)" mode="widthFix" />
				<text>{{name}}({{alias[0]}})</text>
			</uni-grid-item>
		</uni-grid>
		<lgGoTop />
	</view>
</template>

<script>
import { topArtists } from '@/service'
	export default {
		data() {
			return {
				data: [],
			}
		},
		async onLoad() {
			let data = await topArtists()
			this.data = data
			console.log(data)
		},
		methods: {
			singerDetail(singerName, singerId) {
				uni.navigateTo({
					url: `/pages/singer/singer?singerName=${singerName}&singerId=${singerId}`
				})
			}
		},
	}
</script>

<style lang="scss">
.containers{
	padding: 0 $uni-spacing-row-sm;
	.grid{
		justify-content: space-between;
		.grid-list{
			
			height: 200px !important;
			margin-bottom: $uni-spacing-col-base;
			text-align: center;
			image{
				width: 100%;
				border-radius: $uni-border-radius-base;
			}
			text{
				font-size: $uni-font-size-lg;
				color: #333;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
}

</style>